<template>
  <div class="channel-edit">
    <!-- 1.我的频道------------------------------------- -->
    <!-- 1.1 按钮行 -->
    <van-cell title="我的频道" :border="false">
      <van-button
        @click="isEdit = !isEdit"
        size="mini"
        round
        type="danger"
        plain
        >{{ isEdit ? '完成' : '编辑' }}</van-button
      >
    </van-cell>
    <!-- 1.2 我的频道 列表 -->
    <van-grid :gutter="10">
      <van-grid-item
        class="channel-item"
        :class="{ redFont: i === index }"
        v-for="(myC, i) in usrChanList"
        :key="myC.id"
        :text="myC.name"
        :icon="getClearIcon(myC)"
        @click="clickChannel(myC, i)"
      />
    </van-grid>

    <!-- 2.频道推荐------------------------------------- -->
    <!-- 2.1 按钮行 -->
    <van-cell title="频道推荐" :border="false"></van-cell>
    <!-- 2.2 推荐频道 列表 -->
    <van-grid :gutter="10" class="recommend-grid">
      <van-grid-item
        @click="addChan(rec, i)"
        class="channel-item"
        v-for="(rec, i) in recommandChanList"
        :key="rec.id"
        :text="rec.name"
        icon="plus"
      />
    </van-grid>
  </div>
</template>

<script>
// 导入 vuex的映射属性方法
import { mapState } from 'vuex';
// 导入 获取 所有频道 接口
import {
  getAllChannels,
  addUsrChannel,
  removeUsrChannel,
} from '@/api/channels.js';
// 导入 setItem 方法帮助持久化
import { setItem } from '@/utils/storage.js';

export default {
  name: 'channel-edit',
  // 父传子属性：当前登录【用户频道列表】
  props: ['usrChanList', 'index'],
  data() {
    return {
      // 我的频道 编辑状态
      isEdit: false,
      // 推荐频道数组
      recommandChanList: [],
      // 白名单频道数组：凡是在此名单中的用户频道，不许被删除
      whiteList: [0, 2],
    };
  },
  async created() {
    // 1.请求 获取 所有频道列表 -------------------
    const { data: resBody } = await getAllChannels();
    const allChannel = resBody.data.channels;
    // 2.将 全部频道 - 用户频道 得到的内容 加入到 推荐频道列表中
    this.recommandChanList = allChannel.filter(
      (a) => !this.usrChanList.some((b) => a.id === b.id)
    );
  },
  methods: {
    // 1.将 推荐频道 添加到 用户频道--------------------
    async addChan(curChannel, i) {
      // a.根据下标，从 推荐频道中 删除 指定元素
      this.recommandChanList.splice(i, 1);
      // b.将被删除的 频道 ，添加到 用户频道中
      this.usrChanList.push(curChannel);
      // c.数据持久化，登录状态->保存到 数据库，未登录状态 -> 保存到本地LocalStroage
      // c1.如果登录了，则添加到数据库
      // c2.如果未登录，则保存到 本地
      try {
        if (this.user) {
          const res = await addUsrChannel({
            id: curChannel.id,
            seq: this.usrChanList.length,
          });
          console.log(res);
        } else {
          // c2.如果未登录
          setItem(this.$conf.USER_CHNA, this.usrChanList);
        }
      } catch (err) {
        console.log('出错啦：', err.message);
        this.$toast.fail('sorry,服务器繁忙~');
      }
    },
    // 2.获取 我的频道 关闭按钮图标 方法---------------
    getClearIcon(curChannel) {
      // 如果 处于编辑状态，且 传入频道的id 不在白名单中，则 返回 clear 图标名
      if (this.isEdit && !this.whiteList.some((cid) => cid === curChannel.id)) {
        return 'clear';
      }
      return '';
    },
    // 3.点击 我的频道 按钮方法-----------------------
    async clickChannel(curChannel, i) {
      // a.判断是否为 编辑状态
      if (this.isEdit) {
        // a0.如果 被点击频道 在 【白名单】中，则 不可以移出
        if (this.whiteList.some((cid) => cid === curChannel.id)) return;

        // a1.如果是编辑状态，则 进行 频道 移出操作
        this.usrChanList.splice(i, 1);
        this.recommandChanList.push(curChannel);
        this.recommandChanList.sort((x, y) => x.id - y.id);
        // a2.如果 登录了，则 更新到 服务器；否则 更新到 本地
        if (this.user) {
          try {
            await removeUsrChannel(curChannel.id);
          } catch (error) {
            this.$toast.fail('服务器繁忙，请过2年再试');
          }
        } else {
          setItem(this.$conf.USER_CHNA, this.usrChanList);
        }
      } else {
        //a2.如果不是编辑状态，则
        //           调用父组件的事件方法，关闭 弹出层，并切换选中的频道tab
        this.$emit('changeTab', i);
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  watch: {},
  components: {},
};
</script>

<style lang="less" scoped>
.channel-edit {
  padding: 87px 0;
  .title-text {
    font-size: 32px;
    color: #333;
  }
  .edit-btn {
    width: 104px;
    height: 48px;
    font-size: 26px;
    color: #f85959;
    border: 1px solid #f85959;
  }
  /deep/ .redFont .van-grid-item__text {
    color: red !important;
  }
  /deep/ .my-grid {
    .van-icon-clear {
      position: absolute;
      right: -10px;
      top: -10px;
      font-size: 15px;
      color: #cacaca;
      z-index: 2;
    }
  }
  /deep/ .channel-item {
    width: 160px;
    height: 86px;
    .van-grid-item__content {
      flex-direction: row;
      white-space: nowrap;
      background-color: #f3f5f7;
      .van-icon-clear {
        color: #999;
        position: absolute;
        right: -8px;
        top: -8px;
        z-index: 200;
      }
      .van-grid-item__text {
        font-size: 28px;
        color: #222;
        margin-top: 0px;
      }
      .van-icon {
        font-size: 24px;
        margin-right: 2px;
      }
    }
  }
  /deep/ .recommend-grid {
    .channel-item {
      .van-grid-item__content {
        flex-direction: row;
        color: #222;
        .van-icon {
          font-size: 24px;
          margin-right: 2px;
        }
        .van-grid-item__text {
          font-size: 22px;
          margin-top: 0;
        }
      }
    }
  }
}
</style>
